<template>
    <div>
        <h1 class="com_font">发表评论</h1>
        <div class="mui-input-row" style="margin: 10px 5px;">
            <textarea v-model="comContent" id="textarea" maxlength="120" rows="3" placeholder="输入要评论的内容(最对120字)"></textarea>
        </div>
        <mt-button @click="sub" type="primary" size="large">提交评论</mt-button>
        <div class="comment_floor" v-for="item in commentList" :key="item.floor">
            <div class="user_nav">
            <span>第{{item.floor}}楼</span>
            <span>用户：{{item.user}}</span>
            <span>发表时间:{{item.addedTime | formatTime("YYYY-MM-DD HH:mm:ss")}}</span>
            </div>
            <div class="user_content">
                {{item.content}}
            </div>
        </div>
        <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>
    </div>
</template>
<script>
import {Toast} from 'mint-ui';
    export default {
        data:function () {
            return{
                comContent:'',
                originList:'',
                commentList:[],
                commentIndex:1,
                index:null,
                list:[],
                com:'com'+this.id,
            }
        },
        props:['id'],
        methods:{
            refresh:function () {
                if(localStorage.getItem(this.com)){
                    this.list = JSON.parse(localStorage.getItem(this.com));
                    this.commentList = this.list.concat(this.originList);
                }else{
                    this.list = [];
                }
            },
            sub:function () {
                //获取localstorage里已存入的对象转为对象，用list接收
                if(localStorage.getItem(this.com)){
                    this.list = JSON.parse(localStorage.getItem(this.com));
                    this.index = this.list[0].floor + 1;
                }else{
                    this.index = 10;
                    this.list = [];
                }
                //声明要提交的评论对象
                // this.index = Date.now();
                var comment = {"floor":this.index,"user":"匿名用户","addedTime":Date.now(),"content":this.comContent};
                //把评论对象unshift进list
                this.list.unshift(comment);
                //再把list存入localstorage
                localStorage.setItem(this.com,JSON.stringify(this.list));
                this.refresh();
                //清空输入框
                this.comContent = '';
            },
            requireComments:function () {
                this.$http.get('lib/interface3_article'+this.id+'.json').then(function(res){
                if(res.body.status == "ok"){
                    switch(this.commentIndex){
                    case 1:
                    this.originList = res.body.comment3.reverse();
                    res.body.comment3.forEach((item)=>{
                        this.commentList.push(item);
                    });
                    this.refresh();
                    break;
                    case 2:
                    this.originList = res.body.comment3.reverse().concat(res.body.comment2.reverse());
                    res.body.comment2.forEach((item)=>{
                        this.commentList.push(item);
                    });
                    break;
                    case 3:
                    this.originList = res.body.comment3.reverse().concat(res.body.comment2.reverse(),res.body.comment1.reverse());
                    res.body.comment1.forEach((item)=>{
                        this.commentList.push(item);
                    });
                    break;
                    }
                }else{
                        console.error('加载新闻列表失败!');
                }
                },function(){
                        console.log('请求失败处理');
                });
            },
            loadMore:function () {
                if(this.commentIndex < 3){
                    this.commentIndex++;
                    this.requireComments();
                }else{
                    Toast({
                        message: '没有更多内容了',
                        position: 'bottom',
                        duration: 2000
                    });
                }
            }
        },
        created () {
            this.requireComments();
        }
    }
</script>
<style lang="scss" scoped>
    .com_font{
        margin-left: 7px;
        font-size: 18px;
        font-weight: bold;
    }
    .mui-input-row{
        margin-bottom: 0px!important;
    }
    .mint-button{
        margin-bottom: 10px;
    }
    .comment_floor{
        width: 100%;
        margin-bottom: 10px;
        .user_nav{
            height: 28px;
            background: #ccc;
            line-height: 28px;
            font-weight: 550;
            font-size: 12px;
            overflow: scroll;
            .user_nav>span{
            margin-right: 10px;
            line-height: 28px;
            }
        }
        .user_content{
            margin-left: 15px;
            width: 100%;
            height: 28px;
            line-height: 28px;
        }
    }
</style>